<template>
	<view class="page">
		<div class="weui-search-bar" style="position: relative;">
			<i class="weui-icon-search"></i>
			<input type="search" class="search-input pbt2" id='search' placeholder='请输入校友名称....' /><button class="weui-btn weui-btn_mini"><span
				 class="iconfont icon-wodedangxuan-copy f-green"></span></button>
		</div>
		<!-- 搜索end -->
		<div id="tagnav" class="weui-navigator weui-navigator-wrapper sc-subnav">
			<ul class="weui-navigator-list">
				<li class="weui-state-active"><a href="javascript:;">全部</a></li>
				<li><a href="javascript:;">校友总会</a></li>
				<li><a href="javascript:;">地方校友会</a></li>
				<li><a href="javascript:;">郑州校友会</a></li>
				<li><a href="javascript:;">南京校友会</a></li>
				<li><a href="javascript:;">上海校友会</a></li>
				<li style="width: 4rem;"></li>
			</ul>
			<span class="fr-pos"><a class="f-green"><span class="iconfont">&#xe65e;</span>&nbsp;组织申请</a></span>
		</div>
		<div class="weui-panel__bd sc-bai">
			<navigator :url="'/pages/org/index?id='+org.id" v-for="(org,index) in orgs" :key="org.id" class="weui-media-box weui-media-box_appmsg">	
				<div class="weui-media-box__hd weui-avatar-circle ">
					<img class="weui-media-box__thumb" :src="org.logoPath" alt="">
				</div>
				<div class="weui-media-box__bd">
					<h4 class="weui-media-box__title">{{org.orgName}}</h4>
					<p class="weui-media-box__desc">活动 &nbsp; {{org.activityCount}} &nbsp;&nbsp;&nbsp;&nbsp; 成员 &nbsp; {{org.memberCount}}</p>
					<p class="weui-media-box__desc">活跃度 &nbsp;&nbsp;<span class="weui-rater">
							<em data-num="1" :class="org.activeLevel==1?'on':''"> <span>★</span> </em>
							<em data-num="2" :class="org.activeLevel==2?'on':''"> <span>★</span> </em>
							<em data-num="3" :class="org.activeLevel==3?'on':''"> <span>★</span> </em>
							<em data-num="4" :class="org.activeLevel==4?'on':''"> <span>★</span> </em>
							<em data-num="5" :class="org.activeLevel==5?'on':''"> <span>★</span> </em>
						</span></p>
				</div>
			</navigator>
			
		</div>
		<!-- <tab-bar :current="3"></tab-bar> -->
	</view>
</template>

<script>
	// import tabBar from '../../components/tabBar.vue';
	export default {
		data() {
			return {
				orgs: []
			}
		},
		components: {
			// tabBar
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				let _self = this;
				this.$get(this.$api.orgList, {}).then(res => {
					if (res.code == 0) {
						_self.orgs = res.orgs;
					} else {
						uni.showModal({
							title: '操作提示',
							content: res.msg,
							showCancel: false
						})
					}
				})
			}
		}
	}
</script>

<style>
	.placeholder {
		margin: 0.3125rem;
		padding: 0 0.1rem;
		height: 100%;
		text-align: center;
	}

	.placeholder img {
		max-width: 100%;
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	}

	.fr-pos {
		position: absolute;
		right: 0;
		top: 0;
		display: inline-block;
		padding: 0 0.3125rem;
		background: #f2f2f2;
		height: 2.5rem;
		line-height: 1.7rem;
		font-weight: normal;

	}

	.fr-pos a {
		font-size: 0.75rem;
	}

	.fr-pos .iconfont {
		font-size: 0.5rem;
	}

	.sc-bai a.weui-media-box {
		margin-bottom: 0;
	}

	.weui-media-box:before {
		left: 0;
	}

	.weui-rater {
		display: flex;
	}
</style>
